<template>
    <div class="hardware">
        <div style="border-left: 5px solid #409eff;font-size: 20px;font-weight: bold;padding-left: 10px;">服务器详情</div>
        <div class="hardware_one">
            <el-row :gutter="30">
                <el-col :span="4">
                    <div class="grid-content bg-purple" id="total_content">
                       <img src="./imgs/windows.png" style="margin-top: 20px;" />
                        <br/>
                        运行内存：4GB
                    </div>
                </el-col>

                <el-col :span="5">
                    <div class="grid-content bg-purple" :style="{'background-color':backgroundColor,'opacity':0.7}">
                        <img src="./imgs/windows.png" style="margin-top: 20px;" />
                        <br/>
                        剩余内存：{{computWindow[0]}}
                    </div>
                </el-col>

                <el-col :span="5">
                    <div class="grid-content bg-purple" id="disk_total">
                        <img src="./imgs/windows.png" style="margin-top: 20px;" />
                        <br/>
                        内存使用率：{{computWindow[1]}}
                    </div>
                </el-col>

                <el-col :span="5">
                    <div class="grid-content bg-purple" id="surplus_disk">
                        <img src="./imgs/windows.png" style="margin-top: 20px;" />
                        <br/>
                        CPU占用率：{{computWindow[2]}}
                    </div>
                </el-col>

                <el-col :span="4">
                    <div class="grid-content bg-purple" id="cpu_disk">
                        <img src="./imgs/windows.png" style="margin-top: 20px;" />
                        <br/>
                        CPU物理个数：{{computWindow[3]}}
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="border-left: 5px solid #409eff;font-size: 20px;font-weight: bold;margin-top: 30px;padding-left: 10px;">销售情况</div>
        <div style="margin: 0 auto;text-align: center;width: 100%;padding-top: 20px;">
            <table style="width: 100%;">
                <tr>
                    <td>
                        <div style="width: 300px;height: 200px;background-color: #AAFFFF;border-radius: 30px;">
                            <div style="padding-top: 25px;">
                                <span style="font-weight: bold;font-size: 30px;">上月销售情况</span>
                                <div style="padding-top: 20px;font-size: 20px;">销售数量：{{oldAmount}}</div>
                                <div style="padding-top: 10px;font-size: 20px;">销售额：{{oldQuota}}元</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div style="width: 300px;height: 200px;background-color: #FFFF00;border-radius: 30px;">
                            <div style="padding-top: 25px;">
                                <span style="font-weight: bold;font-size: 30px;">本月销售情况</span>
                                <div style="padding-top: 20px;font-size: 20px;">销售数量：{{nowAmount}}</div>
                                <div style="padding-top: 10px;font-size: 20px;">销售额：{{nowQuota}}元</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div v-if="nowQuota-oldQuota > 0" style="width: 300px;height: 200px;background-color: #22DD92;border-radius: 30px;">
                            <div style="padding-top: 15px;">
                                <span style="font-weight: bold;font-size: 30px;">同比增长</span>
                                <div style="padding-top: 10px;font-size: 20px;">销售差：{{nowAmount - oldAmount}}</div>
                                <div style="padding-top: 10px;font-size: 20px;">额度增长：{{nowQuota - oldQuota}}元</div>
                                <div style="padding-top: 10px;font-size: 40px;font-weight: bold;color: yellow;">
                                    {{analysisRate(nowQuota,oldQuota) }}%<i style="font-size: 40px;" class="el-icon-top"></i>
                                </div>
                            </div>
                        </div>
                        <div v-else style="width: 300px;height: 200px;background-color: #F70938;border-radius: 30px;">
                            <br/>
                            <span style="font-weight: bold;font-size: 30px;">同比下降</span>
                            <div style="padding-top: 10px;font-size: 20px;">销售差：{{nowAmount - oldAmount}}</div>
                            <div style="padding-top: 10px;font-size: 20px;">额度下降：{{oldQuota - nowQuota}}元</div>
                            <div style="padding-top: 10px;font-size: 40px;font-weight: bold;color: white;">
                                {{analysisRate(nowQuota,oldQuota) }}%<i style="font-size: 40px;" class="el-icon-bottom"></i>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

<!--   时间     -->
        <div style="width: 95%;text-align: right;margin-top:50px;font-size: 60px;" >
            <span :style="'color:' + color">{{times}}</span>
        </div>
    </div>
</template>

<script>
    import {shoppCarApi} from "@/api/ljy_port/shoppCar"
    import {controlListApi} from '@/api/backstage/control'
    export default {
        name: "hardware",
        watch:{
            computWindow : {
                handler: async function() {
                    if (parseInt(this.computWindow[0]) < 500 && parseInt(this.computWindow[0]) > 1){
                        this.backgroundColor = "red";
                    }else {
                        this.backgroundColor = "#ffb400";
                    }
                }
            }
        },
        data(){
            return{
                computWindow : ['4GB','20%','34%',2],
                backgroundColor:'#ffb400',
                tableData:[],
                //  额度
                nowQuota:0,
                oldQuota:0,
                //  数量
                nowAmount:0,
                oldAmount:0,
                times:'',
                color:'#FFFFFF'
            }
        },
        created(){
          this.controlLis();
            this.analysis();
            this.timeData();
        },
        mounted() {
            this.timer = setInterval(() =>{
                this.controlLis();
            }, 3000);
            this.timeObtain = setInterval(() =>{
                this.timeData();
            }, 1000);
        },
        methods:{
            async timeData(){
                let date = new Date();
                let monthon = date.getMonth() + 1;
                let time =date.getFullYear() + '年' + monthon + '月' + date.getDate() + '日'+date.getHours() +':' +date.getMinutes() + ':' + date.getSeconds();
                this.times = time;
                this.color = '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
            },
            async controlLis(){
                controlListApi().then(res =>{
                    if (res.data){
                        this.computWindow = res.data
                    }else {
                        clearInterval(this.timer);
                    }
                })
            },
            async analysis(){
                this.nowQuota = 0;
                this.oldQuota = 0;
                this.nowAmount = 0;
                this.oldAmount = 0;
               let nowMonth = new Date().getMonth();
               let nowYear = new Date().getFullYear();
               let nowFirst =   new Date(nowYear, 0, 1).getTime();
                shoppCarApi(1,99999).then(res =>{
                    this.tableData = res.data.content;
                    this.tableData.forEach(item=> {
                        if (parseInt(item.buy_time) > nowFirst){
                            let now= new Date(parseInt(item.buy_time)).getMonth()
                            if ((nowMonth-now) === 1)
                            {
                                this.oldAmount = this.oldAmount + item.buy_number;
                                this.oldQuota = this.oldQuota + item.buy_number*parseInt(item.goods_pice)
                            }
                            if (nowMonth===now)
                            {
                                this.nowAmount = this.nowAmount + item.buy_number;
                                this.nowQuota = this.nowQuota + item.buy_number*parseInt(item.goods_pice)
                            }
                        }
                    });
                })
            },
            analysisRate(now,old){
                let rate = ((now/old)*100 - 100).toFixed(2);
                return rate
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
            clearInterval(this.timeObtain);
        }
    }
</script>

<style lang="scss" scoped>
.hardware{
    padding-left: 30px;
    .hardware_one{
        margin-top: 10px;
        margin-left: 20px;
        text-align: center;
        #total_content{
            background-color: #959801;
            opacity: 0.7;
        }
        #disk_total{
            background-color: #61b9ff;
            opacity: 0.7;
        }
        #surplus_disk{
            background-color: #61b9ff;
            opacity: 0.7;
        }
        #cpu_disk{
            background-color: #61b9ff;
            opacity: 0.7;
        }
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 130px;
            font-weight: bold;
            color: white;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    }
}
</style>
